<template>
  <!--<van-tabs>
    <van-tab v-for="item in kinds" :title="item.name">
      
    </van-tab>
  </van-tabs>-->
  <div>
    <van-checkbox-group class="card-goods" v-model="checkedGoods">
      <van-checkbox class="card-goods__item" v-for="item in goods" :key="item.id" :name="item.id">
        <van-card :title="item.title" :desc="item.content" :num="item.id" :price="item.price" :thumb="item.img" :key="item.id">
         <div slot="footer">
            <van-button @click="addGoods(item.id)" size="mini">购买</van-button>
        </div>
        </van-card>
      </van-checkbox>
    </van-checkbox-group>
    <!--<van-submit-bar :price="totalPrice" :disabled="!checkedGoods.length" :button-text="submitBarText" @submit="onSubmit" />-->
  </div>
</template>

<script>
  import Vue from 'vue';
  import axios from 'axios';
  Vue.prototype.$http = axios;

  import {
    Tab,
    Tabs,
    Checkbox,
    CheckboxGroup,
    Card,
    SubmitBar
  } from 'vant';


  Vue.use(Card);
  Vue.use(Tab).use(Tabs);
  Vue.use(Checkbox).use(CheckboxGroup);
  Vue.use(SubmitBar);

  export default {
    data() {
      return {
        checkedGoods: [],
        goods: [],
        kinds: [{
            name: '特色美食'
          },
          {
            name: '今日特价'
          }
        ]
      }
    },
    methods: {
      addGoods(id) {
        // const count = this.checkedGoods.length;
        // res =(count ? `(${count})` : '0');
        this.$store.commit('setCount', id);
      }
    
    },

    mounted() {
      //   this.axios.get('http://localhost:8080/static/data/goods.json')
      //     .then(res => {
      //       this.goods = [...res.data];
      //     })
      //     .catch(() => {
      //       this.axios.get('http://localhost:8080/static/data/goods.json')
      //         .then(res => {
      //           this.goods = [...res.data];
      //         })
      //     })
      // this.goods = data;
      // axios.get('http://localhost:8080/static/data/goods.json').then(res => {
      //   this.goods = [...res.data];
      // })
      this.$http.get('/static/data/goods.json').then(res => {
        this.goods = [...res.data];
      })
    }
  }

</script>

<style lang="less" rel="stylesheet/less">
  .card-goods {
    padding: 10px 0;
    background-color: #fff;
  }

</style>
